//1.tasks 数据结构
// let tasks = [
//   { id: 1, text: "睡觉", completed: false },
//   { id: 2, text: "吃饭", completed: true },
//   { id: 3, text: "打豆豆", completed: false }
// ];
let tasks = getLoalStorage()||[];
console.log(tasks);

//2.获取元素
let addBtn = document.querySelector(".addtask .addbtn");
let inputText = document.querySelector(".addtask input");
let ul = document.querySelector(".tasklist ul");
let category =document.querySelector(".category")
let inputSearch = document.querySelector(".search input")


//3. 事件添加

// window onload 事件
window.addEventListener('load',function () {
  // 渲染
  renderTasks(tasks);
  //添加事件
})
// 添加按钮
addBtn.addEventListener('click', function () {
  if (inputText.value.trim()!="") {

    //不为空
    //数据添加
    //1.产生数据-task对象
    //数组最有一个值+1
    let id;
    if (tasks.length) {
      id = tasks[tasks.length-1].id+1;
    } else {
      id=1
    }
    
    const task = {
      id: id, text: inputText.value, completed: false
    };
    //2.把对象放到tasks数组中
    tasks.push(task);
    //3.显示下
     console.log(tasks);
    saveToLoalStorage();
    //4.渲染
    renderTasks(tasks);
  } else {
    //输入框为空
    window.alert('请输入添加任务信息！')
  }
  
  
});
// category添加事件-filter 判断是哪个按钮--事件委托
category.addEventListener('click',function (e) {
  if (e.target.tagName=="BUTTON") {
    // 获取自定义属性中的值
    const filter = e.target.dataset.filter;
    //渲染
    renderTasks(filterTasks(tasks,filter))
  }
})
//搜索框enter后修改数据
inputSearch.addEventListener('keydown',function (e) {
  // 按下回车键
  if (e.key==="Enter") {
    //判断搜索框是否为空
    if (inputSearch.value.trim()!=""){
    //拿搜索框中的值和数组中每个元素的text值进行搜索 得到一个数组
    let searchTasks = tasks.filter(task=>task.text.includes(inputSearch.value.trim()))

    //渲染
      renderTasks(searchTasks);
    }else{
      //搜索框为空
    window.alert('请在搜索框中输入搜索信息！')
    }
  }
})
// 使用事件委托处理删除操作
ul.addEventListener('click',function (e) {
  removeTask(e);
  editTask(e);
  changeStatus(e);
});
// 4.函数
function renderTasks(tasks) {
  
    // 任务列表的渲染
  //清空现有ul中html
  ul.innerHTML = '';
  tasks.forEach(task => {
    // 创建一个元素
    const li = document.createElement('li');
    // 修改元素的html内容
    li.innerHTML = `<div class="left">
            <input type="checkbox" data-id="${task.id}" ${task.completed?'checked':''} >
            <span class="${task.completed?'line':''}">${task.text}</span>
          </div>
          <div class="btn-group">
            <button  class="editBtn" data-id="${task.id}">编辑</button>
            <button class="delBtn" data-id="${task.id}">删除</button>
          </div>
      `;
      // 修改li中checkbox的checked属性
    // const input = li.querySelector("input");
    
    // input.checked = task.completed;
    // console.log(input.checked);
        // 找删除按钮
        // const delBtn = li.querySelector(".delBtn"); 
        // 绑定删除函数
        //delBtn.onclick = () => removeTask(task.id);
        // delBtn.addEventListener('click',function (e) {
        //   removeTask(task.id,e)
          
        // });
    // 把元素放到ul中
    ul.appendChild(li);
  });
  updateCount();
  }

// 
// input :
/*
  功能：分类过滤函数
  输入：tasks-所有任务，filter[all,completed,uncompleted] 
  输出：过滤后的任务
*/
function filterTasks(tasks,filter) {
  switch (filter) {
    case "completed":
     return tasks.filter(task=>task.completed);
    case "uncompleted":
      return  tasks.filter(task=>!task.completed);
    default:
      return tasks;
  }
}

// 改变task的完成属性值
function changeStatus(e) {
  let li ;
    if (e.target.nodeName == "INPUT") {
     //修改数据
    // 获取task的id值
    const id = e.target.dataset.id;
    console.log(id);
    
    const task = tasks.find(task=>task.id==id);
    console.log(task);
    console.log(e.target.checked);
    task.completed =   e.target.checked;
    saveToLoalStorage();
    //修改后面文本的样式
    e.target.parentElement.children[1].classList.toggle('line');

    updateCount()
    }
  
}
// 删除函数
function removeTask(e) {

  let li ;
    if (e.target.nodeName == "BUTTON"&& e.target.className=="delBtn") {
     // 删除数据
        // 获取task的id值
    const id = e.target.dataset.id;
    tasks = tasks.filter(task=>task.id!=id);
    saveToLoalStorage();
    
        //交互
       //获取包含删除按钮的li元素
        li = e.target.parentElement.parentElement;
        //自己删除自己
        // li.remove();
        // 在父元素中删除孩子
        ul.removeChild(li);
        updateCount()     
    } 
    
}
//编辑函数
function editTask(e) {

  let li ;
    if (e.target.nodeName == "BUTTON"&& e.target.className=="editBtn") {
     // 删除数据
        // 获取task的id值
    const id = e.target.dataset.id;
    const task = tasks.find(task=>task.id==id);
    console.log(id);
    console.log(task);
    
    showEditAlert(id,task.text)
    


    }
    
}

function updateCount() {
   // 底部统计数据的渲染
      //生成统计数据
      let all = tasks.length;
      let completed = tasks.filter(task=>task.completed).length;
      let uncompleted = all - completed;
      
  // 修改对应元素的数据
    // const spans = document.querySelectorAll('.footer span');
    // spans[0].textContent = `全部 ${all}`;
    // spans[1].textContent = `已完成 ${completed}`;
    // spans[2].textContent = `未完成 ${uncompleted}`;
    
    //获取元素的另外的方法
    document.querySelector('.footer span:nth-child(1)').textContent = `全部 ${all}`;
    document.querySelector('.footer span:nth-child(2)').textContent = `已完成 ${completed}`;
    document.querySelector('.footer span:nth-child(3)').textContent = `未完成 ${uncompleted}`;
  
}
//把数据保存到本地的函数
function saveToLoalStorage() {
  localStorage.setItem('tasks',JSON.stringify(tasks));
}

//获取本地保存的函数
function getLoalStorage() {
 return  JSON.parse(localStorage.getItem('tasks'));
}